<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { getRechargeRecordPage } from '../../api/rechargeRecord'
import { HttpStatusCode } from "axios"
import { ElMessage } from "element-plus"
import RechargeRecordTable from './components/rechargeRecordTable/index.vue'

let recordList = ref<ListRechargeRecord[]>([])
const merchantId  = ref('')
const pagination = reactive<Page>({})
let loading = ref(false)
//子组件方法
const tableRef = ref()

onMounted(() => {
  getData(1, merchantId.value)
})

const getData = async (page: number, merchantId: string) => {
  loading.value = true
  const res = await getRechargeRecordPage(page, merchantId)
  if(res.statusCode === HttpStatusCode.Ok) {
    recordList.value = res.data.data as ListRechargeRecord[]
    pagination.current = page
    pagination.total = res.data.total
    pagination.pageSize = res.data.pageRow
    loading.value = false
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }
}
const searchRecord = () => {
  getData(1, merchantId.value)
}
const handleChange = (val: number) => {
  getData(val, merchantId.value)
}
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="search">
        <el-input class="searchInp" clearable v-model="merchantId" placeholder="输入商户订单">
        </el-input>
        <el-button class="searchBtn" type="primary" @click="searchRecord">搜索</el-button>
      </div>
      <div class="btnGroup"></div>
    </div>
    <!--    表格-->
    <div class="table">
      <RechargeRecordTable :record-list="recordList" :loading="loading" />
      <el-pagination
          class="pag"
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :current-page="pagination.current"
          @current-change="handleChange"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .header {
    width: 95%;
    height: 60px;
    margin: 0 auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .search {
      margin-left: 20px;
      display: flex;
      align-items: center;
      .searchInp {
        width: 300px;
      }
      .searchBtn {
        margin-left: 10px;
      }
    }
    .btnGroup {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
  }
  .table {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pag {
      margin-top: 20px;
    }
  }
}
</style>